<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">

    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>首页</title>
    <script src="./js/vue.js"></script>
    <link href="./css/style.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div id="container">

    <div class="header">
        <!--<img :src="source" >-->
        <!--<span >{{ title}}</span>-->
        <img :src="source" alt="" style="float: left">
        <div>{{title}}</div>
    </div>
    <!--ctrl+shift+k 点push，推送到远程-->
    <!--ctrl+k 点commit 保存到本地-->

    <div id="body" v-show="type=='message'" >

        <div style="margin: 6px 10px;">

            <input type="text" class="form-control search" placeholder="搜索">
        </div>

        <div v-for="(msg,i) in message_array">
            <li>
                <div class="pull-left">
                    <img :src="msg.avatar_url" class="aravar" alt="">
                </div>

                <div class="pull-left" style="margin-left:10px;">
                    <div style="font-size: 20px;" v-text="msg.name" ></div>
                    <div style="font-size: 10px;font-size: 10px;" v-text="msg.text"></div>

                </div>

                <span class="pull-right" style="margin-right: 5px;" v-text="msg.time">18:33</span>
                <a class="btn btn-danger pull-right" @click="del(i)">删除</a>


            </li>
            <hr>
        </div>



    </div>

    <div id="footer">
        <span style="margin-right:20%;margin-left: 6%"  @click="changeTypeToMessage()">
            ※
            <a href="#" style="color: #18a3ff" v-show="type=='message'">消息</a>
            <a href="#"  v-show="type!='message'">消息</a>
        </span>


        <span style="margin-right:20%;margin-left: 6%" @click="changeTypeToContact()">
            ※
            <a href="#"  style="color: #18a3ff" v-show="type=='contact'">联系人</a>
            <a href="#" v-show="type!='contact'">联系人</a>
        </span>
        <span style="margin-right:20%;margin-left: 6%" @click="changTypeMoment()">
            ※
            <a href="#" style="color: #18a3ff" v-show="type=='moment'" >动态</a>
            <a href="#" v-show="type!='moment'">动态</a>
        </span>
    </div>
</div>

<script>
    var vm = new Vue({
        el: '#container',
        data: {
            source: "images/leaf.jpg",
            title: "消息",
            type:'message',//contact,moment
            message_array: [
                {avatar_url:"./images/1.jpg",name:"little leaf",time:"7:10",text:"我想你了!"},
                {avatar_url:"./images/2.jpg",name:"ice",time:"7:11",text:"我也想你了!"},
                {avatar_url:"./images/2.jpg",name:"ice",time:"7:11",text:"我也想你了!"},
                {avatar_url:"./images/2.jpg",name:"ice",time:"7:11",text:"我也想你了!"},
                {avatar_url:"./images/3.jpg",name:"云红",time:"7:12",text:"来电了!"}
            ]

        },
        methods: {
            dealMessage: function () {
                this.message_array.push(this.message);
                this.message = '';
            },
            del(index){
                this.message_array.splice(index,1)
            },

            changeTypeToContact(){
                this.type='contact';
            },

            changeTypeToMessage(){
                this.type='message';
            },
            changTypeMoment(){
                this.type='moment';
            }

        },
    });
</script>

</body>
</html>